Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Buyer guarantee refactor QA fixes #8440

Merged
merged 4 commits into from
Sep 24, 2021

Conversation

jo-rs
Copy link
Contributor

@jo-rs jo-rs commented Sep 21, 2021

Addresses visual QA issues from PURCHASE-2918

  • CTA fill on desktop ✅
Screenshot 2021-09-21 at 18 42 08
  • Underlined CTAs ✅
  • Truncated images/copy ✅
Screenshot 2021-09-21 at 18 41 51
  • Missing image caption on small screens: it seems to be purposefully engineered this way from the top-level component ❌

  • Mobile links not working ✅

Sep-21-2021 18-47-47

cc: @artsy/purchase-devs

Comment on lines +14 to +24
interface ConditionalWrapperProps {
condition: boolean
wrapper: (children: React.ReactElement) => JSX.Element
children: React.ReactElement
}

const ConditionalWrapper: React.FC<ConditionalWrapperProps> = ({
condition,
wrapper,
children,
}) => (condition ? wrapper(children) : children)
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Conditional wrapper to avoid duplicate code

@@ -75,10 +75,10 @@ export const BuyerGuaranteeIndex: React.FC = () => {
}

const learnMoreButton = (width?: string) => (
<RouterLink to={supportArticleURL} target="_blank">
<RouterLink noUnderline to={supportArticleURL} target="_blank">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing underline

<Button
width={width ? width : ["100%", "80%", "50%"]}
variant="secondaryOutline"
variant={isMobile ? "secondaryOutline" : "primaryBlack"}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Filled in CTA for desktop

@@ -229,7 +229,7 @@ export const BuyerGuaranteeIndex: React.FC = () => {
</Flex>
</Flex>
{/* Artsy Guarantee Sections desktop */}
<GridColumns gridColumnGap={4} gridRowGap={[6, 12]} my={[6, 12]}>
<GridColumns gridColumnGap={[0, 4]} gridRowGap={[6, 12]} my={[6, 12]}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Addresses responsive cropping

inline
variant="noOutline"
onClick={onClick}
style={{ whiteSpace: "pre-wrap" }}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bonus: addresses links not wrapping and overlapping on smaller screens

Copy link
Member

@rquartararo rquartararo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM not sure if you want to wait for requested reviewers though

@jo-rs jo-rs merged commit c38ae8e into master Sep 24, 2021
@jo-rs jo-rs deleted the jo-rs/buyer-guarantee-refactor-qa-fixes branch September 24, 2021 10:16
@artsy-peril artsy-peril bot mentioned this pull request Sep 24, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants